<template>
    <div>
        <!--<section class="container">-->
            <el-row>
                <el-select v-model="provinceValue" placeholder="请选择" @change="selectProvimce">
                    <el-option
                        v-for="(item,index) of provincearr"
                        :key="index"
                        :label="item.name"
                        :value="item.id"
                    ></el-option>
                </el-select>
                <el-select v-model="cityValue" placeholder="请选择" @change="selectcity">
                    <el-option v-for="(item,index) of cityarr" :key="index" :label="item.name" :value="item.id"></el-option>
                </el-select>
                <el-select placeholder="请选择" v-model="RegionValue" @change="selectRegion">
                    <el-option
                        v-for="(item,index) of regionarr"
                        :key="index"
                        :label="item.name"
                        :value="item.id"
                    ></el-option>
                </el-select>
            </el-row>
        <!--</section>-->
    </div>
</template>

<script>
    import { province } from '../../utils/region'
    import { map } from '../../utils/region'
    export default {
        name: 'test',
        created () {
            this.provincearr = province
        },
        data () {
            return {
                arr: [1, 3, 4],
                province: [],
                cityarr: [],
                regionarr: [],
                provinceValue: '',
                cityValue: '',
                RegionValue: ''
            }
        },
        mounted () {
        },
        methods: {
            selectProvimce (id) {
                this.cityarr = [];
                this.regionarr = [];
                this.cityValue = '';
                this.RegionValue = '';
                for (let item of this.provincearr) {
                    if (id == item.id) {
                        console.log(item)
                        this.cityarr = item.children
                    }
                }
            },
            selectcity (id) {
                this.regionarr = [];
                this.RegionValue = '';
                for (let item of this.cityarr) {
                    if (id == item.id) {
                        this.regionarr = item.children
                    }
                }
                // console.log(this.provinceValue, map[this.provinceValue], this.cityValue, map[this.cityValue])
            },
            selectRegion(){
                this.$emit('done', [
                    {
                        provinces_id: this.provinceValue,
                        province: map[this.provinceValue],
                    },
                    {
                        cities_id: this.cityValue,
                        city: map[this.cityValue],
                    },
                    {
                        areas_id: this.RegionValue,
                        area: map[this.RegionValue],
                    },
                ]);
            },
            inject(r1, r2, r3){
                // console.log(r1, r2, r3)
                this.provinceValue = r1;
                this.selectProvimce(r1);
                this.cityValue = r2;
                this.selectcity(r2);
                this.RegionValue = r3;
                this.selectRegion()
            }
        }
    }
</script>

<style scoped>
    .container {
        width: 800px;
        height: 400px;
        overflow: hidden;
    }
    .box {
        width: 800px;
        height: 50px;
        line-height: 50px;
        background: red;
        color: #fff;
    }
</style>
